import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Image,
    Text
} from 'react-native';
import Constant from '../constant/Constants';
import ImageButton from './ImageButton';
import Device from '../util/Device';
/**
 * 自定义顶部导航栏
 */
export default class TopBar extends Component {
    render() {
        return (
            <View>
                <View style={Styles.container}>
                    <View style={Styles.leftContainer}>
                        {this.props.showBack ? <ImageButton style={Styles.back}
                            onPress={this.props.onBackPress ? this.props.onBackPress : () => { }}
                            source={require('../img/icon_back.png')} /> : null}
                    </View>
                    <View style={Styles.titleContainer}>
                        <Text style={Styles.titleStyle}>{this.props.title}</Text>
                    </View>
                    <View style={Styles.rightContainer}>

                    </View>
                </View>
                <View style={{ height: 1, backgroundColor: Constant.COLOR.ColorLine }} />
            </View>

        );
    }
}
const Styles = StyleSheet.create({
    container: {
        marginTop: Device.OS === 'ios' ? 20 : 0,
        height: 45,
        flexDirection: 'row',
        justifyContent: 'center',
    },
    titleContainer: {
        flex: 0,
        justifyContent: 'center',

    },
    titleStyle: {
        color: Constant.COLOR.ColorGray1,
        fontSize: 16,
        alignSelf: 'center',
    },
    leftContainer: {
        flex: 1,
        height: 45,
        width: undefined
    },
    rightContainer: {
        flex: 1,
    },
    back: {
        resizeMode: Image.resizeMode.center,
        height: 45,
        width: 45
    }
});


